<template>
  <view class="pol flex">
    <view @click="isAgree = !isAgree" class="flex flex-a-c">
      <view v-if="showTip" class="tip active-text flex flex-a fs-24">
        <text>请勾选用户协议</text>
      </view>
      <image v-if="!isAgree" src="../../assets/images/common/radio.png" />
      <image v-else src="../../assets/images/common/radio-checked.png" />
      <text>我已阅读并同意</text>
    </view>
    <text @click="onShowProl(1)" class="active-text">《用户协议》</text>
    <text @click="onShowProl(2)" class="active-text">《隐私协议》</text>
    <Protocol @close="showProl = false" @confirm="showProl = false" :show="showProl" :type="type" />
  </view>
</template>
<script>
import Protocol from './modal.vue' 
export default {
  components:{Protocol},
  props: {
      showTip: false,
  },
  data() {
    return {
      isAgree: false,
      showProl:false,
      type:1,
    };
  },
  methods: {
    onShowProl(type){
      this.type = type;
      this.showProl = true;
    }
  },
  watch: {
    isAgree(val) {
      this.$emit("agree", val);
    },
  },
  computed: {},
};
</script>
<style lang="less" scope>
@import url("../../assets/styles/common");
.pol {
  align-items: center;
  color: #070b1c;
  font-size: 28rpx;
  line-height: 28rpx;
  position: relative;
  padding-left: 40rpx;
  image {
    width: 48rpx;
    height: 48rpx;
  }
  .tip {
    position: absolute;
    bottom: 55rpx;
    left: 16rpx;
    height: 72rpx;
    min-width: 216rpx;
    background-image: url("../../assets/images/icons/tip-bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    text {
      border-radius: 16rpx;
      display: block;
      width: 212rpx;
      height: 60rpx;
      line-height: 64rpx;
      font-size: 24rpx;
      font-weight: bold;
      position: absolute;
      left: 2rpx;
      top: 0;
      z-index: 2;
      text-align: center;
    }
  }
}
</style>
